<template>
    <div class="edit">
        <div class="main">
            <div class="header">编辑作品</div>
            <div class="dance">作品名:</div>
            <div class="dance-two">
                <!-- v-model="" -->
                <div class="span"></div>
                <el-input
                    class="inp"
                    size="large"
                    maxlength="32"
                    placeholder="Please input"
                    show-word-limit
                    type="text"
                    v-model="dynamicsData.title"
                />
            </div>

            <div class="dance">
                封面
                <span
                    >(为了保证展示效果，请上传宽高比例为16:9，大小不超过4M的图片，支持jpg、png、gif)</span
                >
            </div>

            <div class="dance-item">
                <!-- v-model="" -->
                <div class="span"></div>
                <div class="img">
                    <img
                        class="img-one"
                        style="width: 100%; height: 100%; border-radius: 10px"
                        :src="dynamicsData.cover[0]"
                        alt=""
                    />
                </div>
            </div>

            <div class="details">
                详情信息
                <div class="span"></div>
                <div class="interest">
                    兴趣技能 ：
                    <el-tag
                        class="el-tag"
                        closable
                        type="success"
                        size="large "
                        v-for="item in dynamicsData.tags"
                        :key="item.id"
                    >
                        {{ item.name }}
                    </el-tag>
                </div>
                <div class="Switch">
                    <span>本人原创声明 ：</span>
                    <span style="padding-left: 32px">未声明 ：</span>
                    <!-- <el-switch v-model="value1" /> -->
                    <!-- v-model="value2" -->
                    <el-switch
                        class="ml-2"
                        style="
                            --el-switch-on-color: #f93684;
                            --el-switch-off-color: #dcdfe6;
                        "
                    />
                </div>

                <div class="Works">
                    <div class="span"></div>
                    作品来源：
                    <div class="mb-2 flex items-center text-sm">
                        <!-- v-model="radio1" -->
                        <el-radio-group class="ml-4">
                            <el-radio
                                label="1"
                                size="large"
                                style="color: #f93684"
                                >原创</el-radio
                            >
                            <el-radio label="2" size="large">改编</el-radio>
                        </el-radio-group>
                    </div>
                </div>

                <div class="Works-two">
                    <div class="span"></div>
                    原创作者：
                    <el-input
                        class="inp"
                        size="large"
                        maxlength="64"
                        placeholder="Please input"
                        show-word-limit
                        type="text"
                        v-model="dynamicsData.creatorBackup.name"
                    />
                </div>

                <div class="Works-two">
                    <div class="span"></div>
                    作品内容：
                    <!-- v-model="textarea" -->
                    <el-input
                        class="input"
                        placeholder="Please input"
                        show-word-limit
                        type="textarea"
                    />
                </div>

                <div class="Works-two">
                    可见范围：
                    <!-- v-model="value"  -->
                    <el-select
                        class="m-2"
                        placeholder="Select"
                        size="large"
                        v-model="dynamicsData.initExposureNum"
                        style="padding-left: 30px"
                    >
                        <!-- v-for="item in options" -->
                        <!-- :key="item.value"
                    :label="item.label"
                    :value="item.value" -->
                        <el-option label="全部可见" value="0"></el-option>
                        <el-option
                            label="仅在我的主页可见"
                            value="1"
                        ></el-option>
                    </el-select>
                </div>

                <div class="Check">
                    <el-button class="btn" type="danger" :icon="Check" danger />
                    <span
                        >我承诺：遵守《用户服务协议》，维护用户合法权益；不以任何方式提供或索要手机号、微信号、抖音号等第三方号码；遵守著作权法，确保发布上传的图文、音视频等</span
                    >
                    <p>不侵犯 第三方合法权利，自行承担全部风险和责任。</p>
                </div>
            </div>
        </div>
        <button class="Button" @click="returnHandler">发布</button>
    </div>
</template>
<script lang="ts" setup>
import { Check } from "@element-plus/icons-vue";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCenter } from "@/stores/modules/center";

const route = useRoute();
const router = useRouter();
const dynamics = useCenter();
// 获取表格数据
const tableData = computed(() => {
    return dynamics.dynamicsList;
});
// 获取id
const id = route.query.id;

const dynamicsData = tableData.value.find((item) => item.id == id);
// 返回原页面
const returnHandler = () => {
    router.back();
};
onMounted(() => {});
</script>
<script lang="ts">
export default {
    name: "Edit",
};
</script>
<style scoped lang="scss">
.edit {
    width: 100%;
    height: 100%;
    background: #f5f7f9;
}
.main {
    width: 1200px;
    margin: 0 auto;
}
.header {
    width: 1200px;
    height: 68px;
    margin-top: 20px;
    background-color: #ffff;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 68px;
    padding-left: 30px;
}
.dance {
    width: 1200px;
    height: 53px;
    margin-top: 10px;
    background-color: #ffff;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 53px;
    padding-left: 30px;
}
.dance span {
    font-size: 12px;
    color: rgb(177, 181, 193);
}

.dance-two {
    width: 100%;
    height: 98px;

    margin-top: 1px;
    background-color: #ffff;
    border-radius: 5px;
    padding-left: 30px;
    position: relative;
}
.dance-two .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 30px;
    top: 50%;
}
.dance-two .inp {
    padding-top: 30px;
    padding-left: 30px;
    width: 950px;
}

.dance-item {
    width: 100%;
    height: 262px;
    margin-top: 1px;
    background-color: #ffff;
    border-radius: 5px;
    padding-left: 30px;
    position: relative;
    padding-top: 40px;
}
.dance-item .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 30px;
    top: 20%;
}

.dance-item .img {
    width: 300px;
    height: 168px;
    background-color: #f56c6c;
    margin-left: 30px;
    border-radius: 10px;
    background-image: url(../../image/111.jpg);
}
.details {
    width: 1200px;
    height: 600px;
    position: relative;
    margin-top: 20px;
    background-color: #ffff;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 68px;
    padding-left: 40px;
}
.details .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 18%;
}
.interest {
    padding-left: 24px;
    color: #111;
    padding-top: 8px;
}
.interest .el-tag {
    margin-left: 10px;
}

.Switch {
    padding-left: 24px;
    color: #111;
    padding-top: 15px;
}

.Works {
    padding-left: 24px;
    color: #111;
    // padding-top: 8px;
}
.Works .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 43%;
}
.Works .mb-2 {
    position: absolute;
    top: 38%;
    left: 170px;
}

.Works-two {
    padding-left: 24px;
    color: #111;
    // padding-top: 8px;
}
.Works-two .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 54%;
}
.Works-two .inp {
    // padding-top: 10px;
    padding-left: 30px;
    width: 760px;
}

.Works-two .span {
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    left: 40px;
    top: 394px;
}
.Works-two .input {
    position: absolute;
    left: 168px;
    top: 370px;
    width: 920px;
}

.Check {
    padding-left: 30px;
}
.Check .btn {
    width: 20px;
    height: 30px;
}
.Check span {
    margin: 0;
    line-height: 24px;
    margin-left: 10px;
    color: #7d8090;
}

.Check p {
    margin-top: -44px;
    margin-left: 42px;
    color: #7d8090;
}

.Button {
    width: 180px;
    height: 50px;
    padding: 10px 20px;
    margin-top: 16px;
    margin-left: 246px;
    margin-bottom: 52px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #f93684;
    border-color: #f93684;
}
</style>
